/*
 * @Author: your name
 * @Date: 2021-12-16 17:54:24
 * @LastEditTime: 2021-12-22 15:01:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\productCollection\ProductImage.tsx
 */
import React from 'react';
import { Image, Typography } from 'antd';
import { withRouter, RouteComponentProps, Link } from 'react-router-dom';

interface PropsType extends RouteComponentProps {
  id: string | number;
  size: 'large' | 'small';
  imageSrc: string;
  price: number | string;
  title: string;
}

const ProductImageComponent: React.FC<PropsType> = ({
  id,
  size,
  imageSrc,
  price,
  title,
  history,
  location,
  match
}) => {
  // console.log('history :>> ', history);
  // console.log('location :>> ', location);
  // console.log('match :>> ', match);
  return (
    <Link to={`detail/${id}`}>
      {/* <div onClick={() => history.push(`detail/${id}`)}> */}
        { size === 'large' ? (
          <Image src={imageSrc} height={285} width={490} />
        ) : (
          <Image src={imageSrc} height={120} width={240} />
        )}
        <div>
          <Typography.Text type="secondary">{title.slice(0, 25)}</Typography.Text>
          <Typography.Text type="danger" strong>￥{price}起</Typography.Text>
        </div>
      {/* </div> */}
    </Link>
  )
}

export const ProductImage = withRouter(ProductImageComponent)
